<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<!--引入 Vue  和  vant -->
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<script src="js/vue.min.js?v=21"></script>
		<script src="js/jquery.min.js?v=21"></script>
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<!-- vantUi框架 -->
		<!-- 样式 -->
		<link rel="stylesheet" type="text/css" href="vant-ui@2.11/index.css" />
		<!-- 逻辑方法 -->
		<script src="vant-ui@2.11/vant.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<!-- 写样式 -->
	<style>
		.all {
			display: flex;
			flex-direction: column;
			width: 100%;
			align-items: center;
		}

		.text-logo {
			font-size: 50px;
			margin-top: 80px;
		}

		.input-user {
			width: 86%;
			height: 35px;
			margin-top: 20px;
			border-radius: 20px;
			border: #ccc solid 1px;
			padding-left: 10px;
		}

		.btn-login {
			width: 90%;
			height: 40px;
			margin-top: 30px;
			background: #00BCD4;
			color: #fff;
			border: none;
			border-radius: 20px;
		}

		.bottom {
			display: flex;
			flex-direction: row;
			width: 84%;
			margin-top: 30px;
		}

		.wjmm-text {
			color: #2876EB;
			font-size: 12px;
		}

		.zc-text {
			flex: 1;
			color: #2876EB;
			font-size: 12px;
			text-align: right;
		}

		.password-view {
			width: 88%;
			display: flex;
			flex-direction: row;
			align-items: center;
			border: #a8a8a8 solid 1px;
			padding: 7px 0;
			border-radius: 20px;
			margin-top: 20px;
		}

		.img-eye {
			width: 25px;
			height: 25px;
		}

		.password-input {
			width: 70%;
			border: none;
			padding-left: 5px;
		}

		.bottom-text1 {
			font-size: 12px;
		}

		.bottom-text2 {
			font-size: 12px;
			color: #00BCD4;
		}

		.yzm-view {
			border-left: #A8A8A8 solid 1px;
			font-size: 14px;
			padding-left: 10px;
			color: #A8A8A8;
			width: 80px;
			text-align: center;
		}
	</style>
	<body>
		<!-- 布局 -->
		<div id="root">
			<div class="all">
				<!-- LOGO -->
				<div class="text-logo">LOGO</div>
				<!-- 手机号码 -->
				<input v-model="tel" class="input-user" placeholder="请输入手机号码" />
				<!-- 验证码 -->
				<div class="password-view">
					<input v-model="yzm" class="password-input" type="text" placeholder="请输入验证码" />
					<div v-show="show" class="yzm-view" @click="getYZM">{{count}}</div>
					<div v-show="!show" class="yzm-view">{{count}}</div>
				</div>
				<!-- 登录 -->
				<button class="btn-login" @click="zhuce">注册</button>
				<!-- 阅读协议 -->
				<div class="bottom">
					<van-checkbox v-model="checked">
						<span class="bottom-text1">我已阅读并同意</span>
						<span class="bottom-text2">xxAPP用户协议</span>
					</van-checkbox>
				</div>
			</div>
		</div>
		<script>
			new Vue({
				el: "#root",
				data() {
					return {
						tel: '',
						yzm: '',
						checked: true,
						show:true,
						timer: null,
						count: '获取验证码'
					}
				},
				// 方法
				methods: {
					// 获取随机六位验证码
					getNum(){
						let that = this 
						setTimeout(function() {
							var s = ''//六位随机数
							for (var i = 0; i < 6; i++) {
								let a =  Math.round(Math.random() * 9)
								s = s + a
							}
							that.yzm = s
						}, Math.round(Math.random() * 10 +'') * 1000);
					},
					getYZM() {
						const TIME_COUNT = 60;
						var that = this
						that.count = 60
						that.yzm = ''
						if(!that.timer){
							that.count = TIME_COUNT
							that.show = false
							that.timer = setInterval(() => {
								if(that.count > 0 && that.count <= TIME_COUNT){
									that.count--;
									if(that.yzm!=''){
										that.show = true
										clearInterval(that.timer);//定时器停止
										that.timer = null
										that.count = '重新获取'
									}
								}else{
									that.show = true
									clearInterval(that.timer);//定时器停止
									that.timer = null
									that.count = '重新获取'
								}
							},1000)
							that.getNum()
						}
					},
					//注册
					zhuce() {
						if (this.tel == '') {
							alert("手机号不能为空")
							return
						}
						if (this.yzm == '') {
							alert("验证码不能为空")
							return
						}
						if (!this.checked) {
							alert("请先阅读并同意用户协议")
							return
						}
						alert("注册成功")
						// 返回上一页
						window.history.go(-1)
					},
				},
				mounted() {
					this.getNum()
					let s = ''
					// 获取六位随机数
					for (let i = 0; i < 6; i++) {
						let a = Math.round(Math.random() * 9) + ''
						s = s + a
					}
					console.log('当前数值为', s);
				}
			})
		</script>
	</body>
</html>
